<template>
    <div class="wechat-config">
        <el-form :model="formData" ref="form" :rules="rules" label-width="150px" v-loading="loading">
            <el-row class="group-title">公众号设置</el-row>
            <el-row class="group-content">
                <el-form-item label="选择公众号" prop="wechat">
                    <el-select size="small" v-model="formData.wechat" :loading="wechat.loading">
                        <el-option v-for="item in wechat.list"
                                   :key="item.key" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row class="group-title">访问设置</el-row>
            <el-row class="group-content">
                <el-form-item label="是否在微信打开">
                    <el-tooltip effect="dark" placement="right">
                        <div slot="content">是：必须在微信中打开<br/>否：如果在微信中打开则下面的配置生效，普通浏览器则不生效</div>
                        <el-radio-group v-model="formData.openInWechat">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-tooltip>
                </el-form-item>
            </el-row>
            <el-row class="group-title">关注设置</el-row>
            <el-row class="group-content">
                <el-form-item label="是否需要关注">
                    <el-radio-group v-model="formData.needFollow">
                        <el-radio :label="1">需要关注</el-radio>
                        <el-radio :label="2">不需要关注</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="微信公众号二维码" v-if="formData.needFollow===1">
                    <el-upload class="upload" ref="qrCodeUpload" action=""
                               accept=".jpg,.png"
                               :on-change="onQrCodeFileChange" :file-list="qrCode.fileList"
                               :show-file-list="false" :auto-upload="false">
                        <el-input slot="trigger" class="fileName" :class="qrCode.fileList[0]?'hasFile':'noFile'"
                                  v-model="qrCode.fileName" size="small" placeholder="请选择图片，仅支持.jpg,.png"></el-input>
                        <el-button size="small"
                                   :loading="qrCode.loading"
                                   :disabled="qrCode.fileList.length===0"
                                   :type="qrCode.fileList.length===0?'info':'success'"
                                   @click="qrCodeUpload">上传
                        </el-button>
                    </el-upload>
                    <el-row v-if="formData.qrCodePath" v-loading="qrCode.loading">
                        <img alt="qrCodeImg" :src="qrCode.url"/>
                    </el-row>
                </el-form-item>
            </el-row>
            <el-row class="group-title">分享设置</el-row>
            <el-row class="group-content">
                <el-form-item label="分享内容">
                    <el-radio-group v-model="formData.shareType">
                        <el-radio :label="1">默认(不做处理)</el-radio>
                        <el-radio :label="2">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分享图标" v-if="formData.shareType===2">
                    <el-upload class="upload" ref="shareLogoUpload" action=""
                               :on-change="onShareLogoFileChange" :file-list="shareLogo.fileList"
                               :show-file-list="false" :auto-upload="false">
                        <el-input slot="trigger" class="fileName"
                                  :class="shareLogo.fileList[0]?'hasFile':'noFile'"
                                  v-model="shareLogo.fileName" size="small"
                                  placeholder="请选择图片，仅支持.jpg,.png"></el-input>
                        <el-tooltip effect="dark" content="请确保上传的图片分辨率大于300*300以保证成功率" placement="right">
                            <div class="button-wrap">
                                <el-button size="small"
                                           :loading="shareLogo.loading"
                                           :disabled="shareLogo.fileList.length===0"
                                           :type="shareLogo.fileList.length===0?'info':'success'"
                                           @click="shareLogoUpload">上传
                                </el-button>
                            </div>
                        </el-tooltip>
                    </el-upload>
                    <el-row v-if="formData.shareLogoPath" v-loading="shareLogo.loading">
                        <img alt="qrCodeImg" :src="shareLogo.url"/>
                    </el-row>
                </el-form-item>
                <el-form-item label="分享标题" v-if="formData.shareType===2">
                    <el-input size="small" v-model="formData.shareTitle"></el-input>
                </el-form-item>
                <el-form-item label="分享描述" v-if="formData.shareType===2">
                    <el-input size="small" v-model="formData.shareDesc"></el-input>
                </el-form-item>
            </el-row>
            <el-row class="group-title">授权设置</el-row>
            <el-row class="group-content">
                <el-form-item label="授权方式">
                    <el-radio-group v-model="formData.authType">
                        <el-radio :label="1">静默授权</el-radio>
                        <el-radio :label="2">非静默授权</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row class="group-content">
                <el-form-item class="operation">
                    <el-button>取消</el-button>
                    <el-button type="primary" @click="saveForm">保存</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'wechatConfig',
        props: ['json'],
        data() {
            return {
                loading: false,
                formData: {
                    activityId: '',
                    wechat: '',
                    authType: 1,
                    needFollow: 2,
                    openInWechat: 2,
                    qrCodePath: '',
                    shareType: 1,
                    shareDesc: '',
                    shareLogoPath: '',
                    shareTitle: '',
                },
                wechat: {
                    list: [],
                    loading: false,
                },
                qrCode: {
                    fileList: [],
                    fileName: '',
                    loading: false,
                    url: ''
                },
                shareLogo: {
                    fileList: [],
                    fileName: '',
                    loading: false,
                    url: ''
                },
                rules: {wechat: [{required: true, message: '请选择公众号', trigger: 'blur'}]}
            }
        },
        mounted() {
            this.formData.activityId = this.json.activityId;
            this.initWechatList();
            this.init();
        },
        methods: {
            init() {
                let _this = this;
                _this.loading = true;
                _this.axios({
                    method: 'get',
                    url: '/activityConsole/wechatConfig/' + _this.formData.activityId,
                }).then(res => {
                    if (res.data.status === '200') {
                        if (res.data.data) {
                            _this.formData = Object.assign({}, res.data.data);
                            _this.qrCode.url = '/ActivityWeb/static/' + res.data.data.qrCodePath;
                            _this.shareLogo.url = '/ActivityWeb/static/' + res.data.data.shareLogoPath;
                        }
                    }
                    _this.loading = false;
                }).catch(e => {
                    console.log(e);
                    _this.$message.warning('获取微信配置信息失败，请稍后再试');
                    _this.loading = false;
                });
            },
            initWechatList() {
                let _this = this;
                _this.wechat.loading = true;
                _this.axios({
                    method: 'get',
                    url: '/activityConsole/wechatConfig/wechatList',
                }).then(res => {
                    if (res.data.status === '200') {
                        _this.wechat.list = [...res.data.data];
                        if (!_this.formData.activityId) {
                            // _this.formData.wechat = _this.wechat.map.keys().next().value;
                        }
                    }
                    _this.wechat.loading = false;
                }).catch(e => {
                    console.log(e);
                    _this.wechat.loading = false;
                });
            },
            onQrCodeFileChange(file) {
                this.qrCode.fileList = [file];
                this.qrCode.fileName = file.name;
            },
            qrCodeUpload() {
                let _this = this;
                _this.qrCode.loading = true;
                let data = new FormData();
                data.append('file', _this.qrCode.fileList[0].raw);
                data.append('prefix', 'QrCode_');
                _this.axios({
                    method: 'post',
                    url: '/activityConsole/wechatConfig/imageUpload',
                    data: data
                }).then(res => {
                    if (res.data.status === '200') {
                        _this.qrCode.url = '/ActivityWeb/static/' + res.data.data;
                        _this.qrCode.fileList = [];
                        _this.qrCode.fileName = '已上传';
                        _this.formData.qrCodePath = res.data.data;
                        _this.$message.success(`上传完成`);
                    } else {
                        _this.$message.warning('文件上传失败，请检查文件格式或稍后再试');
                    }
                    _this.qrCode.loading = false;
                }).catch(e => {
                    console.log(e);
                    _this.qrCode.loading = false;
                });
            },
            onShareLogoFileChange(file) {
                this.shareLogo.fileList = [file];
                this.shareLogo.fileName = file.name;
            },
            shareLogoUpload() {
                let _this = this;
                _this.shareLogo.loading = true;
                let data = new FormData();
                data.append('file', _this.shareLogo.fileList[0].raw);
                data.append('prefix', 'ShareLogo_');
                _this.axios({
                    method: 'post',
                    url: '/activityConsole/wechatConfig/imageUpload',
                    data: data
                }).then(res => {
                    if (res.data.status === '200') {
                        _this.shareLogo.url = '/ActivityWeb/static/' + res.data.data;
                        _this.shareLogo.fileList = [];
                        _this.shareLogo.fileName = '已上传';
                        _this.formData.shareLogoPath = res.data.data;
                        _this.$message.success(`上传完成`);
                    } else {
                        _this.$message.warning(`文件上传失败，请检查文件格式或稍后再试`);
                    }
                    _this.shareLogo.loading = false;
                }).catch(e => {
                    console.log(e);
                    _this.shareLogo.loading = false;
                });
            },
            saveForm() {
                let _this = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        _this.loading = true;
                        _this.axios({
                            method: 'post',
                            url: '/activityConsole/wechatConfig/save',
                            data: _this.formData
                        }).then(res => {
                            if (res.data.status === '200') {
                                _this.$message.success(res.data.description);
                            } else {
                                _this.$message.warning(res.data.description);
                            }
                            _this.loading = false;
                        }).catch(e => {
                            console.log(e);
                            _this.loading = false;
                            _this.$message.error('保存失败');
                        });
                    }
                });

            }
        }
    }
</script>
<style lang="scss" scoped>
    .wechat-config {
        .group-title {
            margin: 20px 0 0 20px;
            font-size: 16px;
            font-weight: bold;
            color: #178377;
        }
        .group-content {
            margin: 10px 0 0 50px;
            .el-form-item {
                margin-bottom: 12px;
            }
            .upload {
                .button-wrap {
                    display: inline-block;
                }
                .el-button {
                    padding: 9px 20px;
                }
            }
            img {
                max-width: 600px;
                max-height: 300px;
                margin-top: 5px;
            }
            .operation {
                margin-top: 20px;
                .el-button {
                    padding: 12px 20px;
                    margin-right: 30px;
                }
            }
        }
    }
</style>
